<!-- 天猫直播间报表-旧 -->
<template>
  <div class="mainTable">

    <BaseTable ref="sonTable" :query="query" :tableItems="tableItems" :updateItems="updateItems"
      :optionList="optionList" :methodParam="methodParam" :Btn="Btn" menuName="logRecord" pageName="mainTable" />

    <div class="tablePage" v-loading="loading">
      <div class="search">

        <div class="header-query" key="flag">
          <span class="search-text">统计对象</span>
          <el-select v-model="query.flag" class="search-input" @change="cleanTableData(); getTableData()">
            <el-option key="达播" label="达播" value="达播"></el-option>
            <el-option key="自播" label="自播" value="自播"></el-option>
          </el-select>
        </div>

        <div class="header-query" key="unit">
          <span class="search-text">时间粒度</span>
          <el-select v-model="query.unit" class="search-input" @change="handleChangeTime">
            <el-option key="日" label="日" value="日"></el-option>
            <el-option key="周" label="周" value="周"></el-option>
            <el-option key="月" label="月" value="月"></el-option>
            <el-option key="年" label="年" value="年"></el-option>
          </el-select>
        </div>

        <div class="header-query" key="searchTimeSpan">
          <span class="search-text">开始时间</span>
          <el-date-picker v-model="query.beginDate" class="search-input time-picker" :type="timeType"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
        </div>

        <div class="header-query" key="searchTimeSpan">
          <span class="search-text">结束时间</span>
          <el-date-picker v-model="query.endDate" class="search-input time-picker" :type="timeType" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
        </div>

        <div class="header-query" key="extraRivalNameLs" v-if="query.flag == '竞店'">
          <span class="search-text">竞店名称</span>
          <el-input v-model="query.extraRivalNameLs" class="search-input"></el-input>
        </div>

        <div class="header-query" key="extraKeyword" v-if="query.flag == '本店' && query.unit == '周'">
          <span class="search-text">关键字</span>
          <el-input v-model="query.extraKeyword" class="search-input"></el-input>
        </div>

        <div class="search-btn" @click="getTableData()">
          <div class="btn-img"></div>查询
        </div>
        <div class="export-btn" @click="exportTable" v-loading="exportLoading">
          <div class="btn-img"></div>
          {{ !exportLoading ? "导出" : "导出中" }}
        </div>
      </div>
      <div class="base-table">
        <el-table highlight-current-row ref="myTable" :data="tableData" height="100%" @sort-change="handleSortChange">
          <el-table-column :prop="v.prop" :label="v.name" v-for="v in tableItems" :key="v.prop" show-overflow-tooltip
            sortable="custom" :header-align="v.align ?? 'right'" :align="v.align ?? 'right'">
            <template slot-scope="scope">
              <span v-if="scope.row[v.prop] !== ''">{{ scope.row[v.prop] }}</span>
              <span v-else>---</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-size="pagination.pageSize" :current-page="pagination.currentPage" :total="pagination.total"
          :page-sizes="[15, 50, 100, 300]" background layout="total,sizes, prev, pager, next, jumper"></el-pagination>
      </div>

    </div>
  </div>
</template>
<script>
import dayjs from "dayjs"
import { service } from "@/services/backServices"
import BaseTable from "../../../table/sonTable.vue";
import { export_json_to_excel } from "@/assets/js/FilExport";
export default {
  name: "tmzbjbbOld2",
  data() {
    return {
      query: {
        searchTimeSpan: [dayjs(new Date()).add(-1, 'years').format("YYYY-MM-DD HH:mm:ss"), dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")],
        beginDate: dayjs(new Date()).add(-7, "day").format("YYYY-MM-DD"),
        endDate: dayjs(new Date()).add(-1, "day").format("YYYY-MM-DD"),
        unit: "日",
        flag: "达播"
      },
      //base need
      pagination: {
        pageSize: 15,
        currentPage: 1,
        total: 0
      },
      tableAllData: [

      ],
      //#region 排序相关
      sortCol: "数据统计时间",
      orderCol: null,
      //#endregion
      exportLoading: false,
      loading: false,

      pickerOptions: {

        disabledDate: (time) => {
          // return time.getTime() > Date.now() - 8.64e7;

          // 创建一个表示8月15日的日期对象
          const august15 = new Date(time.getFullYear(), 7, 15); // 月份是从0开始的，所以7代表8月

          // 如果传入的日期在8月15日之后，则返回true以禁用该日期
          return time > august15;
        },
      },
    };
  },
  computed: {
    methodParam() {
      if (this.query.flag == "达播") {
        return "getLivestreamerLivingRoomData"
      } else {
        return "getOwnLivingRoomData"
      }
    },
    tableItems() {
      if (this.query.flag == "达播") {
        if (this.query.unit == "日") {
          return [
            { name: "数据统计时间", prop: "数据统计时间", align: "left" },
            { name: "合作成交直播间数", prop: "合作成交直播间数", align: "left" },
            { name: "种草成交金额", prop: "种草成交金额", align: "left" },
            { name: "店铺种草成交占比", prop: "店铺种草成交占比", align: "left" },
            { name: "直播间店铺新客人数", prop: "直播间店铺新客人数", align: "left" },
            { name: "种草成交人数", prop: "种草成交人数", align: "left" },
            { name: "种草成交件数", prop: "种草成交件数", align: "left" },
            { name: "种草成交笔数", prop: "种草成交笔数", align: "left" },
            { name: "商品点击人数", prop: "商品点击人数", align: "left" },
            { name: "商品点击次数", prop: "商品点击次数", align: "left" },
            { name: "商品加购人数", prop: "商品加购人数", align: "left" },
            { name: "商品加购件数", prop: "商品加购件数", align: "left" }
          ]
        } else {
          return [
            { name: "数据统计时间", prop: "数据统计时间", align: "left" },
            { name: "合作成交直播间数", prop: "合作成交直播间数", align: "left" },
            { name: "种草成交金额", prop: "种草成交金额", align: "left" },
            { name: "店铺种草成交占比", prop: "店铺种草成交占比", align: "left" },
            { name: "直播间店铺新客人数", prop: "直播间店铺新客人数", align: "left" },
            { name: "种草成交人数", prop: "种草成交人数", align: "left" },
            { name: "种草成交件数", prop: "种草成交件数", align: "left" },
            { name: "种草成交笔数", prop: "种草成交笔数", align: "left" },
            { name: "商品点击人数", prop: "商品点击人数", align: "left" },
            { name: "商品点击次数", prop: "商品点击次数", align: "left" },
            { name: "商品加购人数", prop: "商品加购人数", align: "left" },
            // { name: "数据记录数量", prop: "数据记录数量", align: "left" },
            { name: "商品加购件数", prop: "商品加购件数", align: "left" }
          ]
        }
      } else {
        if (this.query.unit == "日") {
          return [
            { name: "数据统计时间", prop: "数据统计时间", align: "left" },
            { name: "直播种草成交金额", prop: "直播种草成交金额", align: "left" },
            { name: "店铺种草成交占比", prop: "店铺种草成交占比", align: "left" },
            { name: "直播间店铺新客人数", prop: "直播间店铺新客人数", align: "left" },
            { name: "直播间新增粉丝数", prop: "直播间新增粉丝数", align: "left" },
            { name: "直播间新增入会数", prop: "直播间新增入会数", align: "left" },
            { name: "会员成交金额", prop: "会员成交金额", align: "left" },
            { name: "种草成交人数", prop: "种草成交人数", align: "left" },
            { name: "会员成交人数", prop: "会员成交人数", align: "left" },
            { name: "种草成交件数", prop: "种草成交件数", align: "left" },
            { name: "会员成交件数", prop: "会员成交件数", align: "left" },
            { name: "种草成交笔数", prop: "种草成交笔数", align: "left" },
            { name: "会员成交笔数", prop: "会员成交笔数", align: "left" },
            { name: "商品点击人数", prop: "商品点击人数", align: "left" },
            { name: "商品点击次数", prop: "商品点击次数", align: "left" },
            { name: "商品加购人数", prop: "商品加购人数", align: "left" },
            { name: "商品加购件数", prop: "商品加购件数", align: "left" },
          ]
        } else {
          return [
            { name: "数据统计时间", prop: "数据统计时间", align: "left" },
            { name: "直播种草成交金额", prop: "直播种草成交金额", align: "left" },
            { name: "店铺种草成交占比", prop: "店铺种草成交占比", align: "left" },
            { name: "直播间店铺新客人数", prop: "直播间店铺新客人数", align: "left" },
            { name: "直播间新增粉丝数", prop: "直播间新增粉丝数", align: "left" },
            { name: "直播间新增入会数", prop: "直播间新增入会数", align: "left" },
            { name: "会员成交金额", prop: "会员成交金额", align: "left" },
            { name: "种草成交人数", prop: "种草成交人数", align: "left" },
            { name: "会员成交人数", prop: "会员成交人数", align: "left" },
            { name: "种草成交件数", prop: "种草成交件数", align: "left" },
            { name: "会员成交件数", prop: "会员成交件数", align: "left" },
            { name: "种草成交笔数", prop: "种草成交笔数", align: "left" },
            { name: "会员成交笔数", prop: "会员成交笔数", align: "left" },
            { name: "商品点击人数", prop: "商品点击人数", align: "left" },
            { name: "商品点击次数", prop: "商品点击次数", align: "left" },
            { name: "商品加购人数", prop: "商品加购人数", align: "left" },
            { name: "商品加购件数", prop: "商品加购件数", align: "left" },
            // { name: "数据记录数量", prop: "数据记录数量", align: "left" },
          ]
        }
      }
    },
    tableData() {
      return this.tableAllData.slice(
        (this.pagination.currentPage - 1) * this.pagination.pageSize,
        this.pagination.currentPage * this.pagination.pageSize
      )
    }
  },
  components: {
  },
  methods: {
    cleanTableData() {
      this.tableAllData = []
    },
    //表格参数改变触发
    handleSizeChange: function (val) {
      this.pagination.pageSize = val;
      this.setTableData();
    },
    handleCurrentChange: function (currentPage) {
      this.pagination.currentPage = currentPage;
      this.setTableData();
    },

    //修改粒度方法
    handleChangeTime(val) {
      this.pagination.currentPage = 1;
      this.getTableData()

      let timeHash = {
        年: 'year',
        月: 'month',
        // 周: 'week',
        周: 'date',
        日: 'date',
      }

      this.timeType = timeHash[val]
    },


    getTableData() {
      let _this = this
      this.loading = true

      let myForm = new FormData()
      // myForm.append("startDate", this.query.searchTimeSpan[0]);
      // myForm.append("endDate", this.query.searchTimeSpan[1]);
      myForm.append("startDate", this.query.beginDate);
      myForm.append("endDate", this.query.endDate);
      myForm.append('unit', this.query.unit)

      //#region 排序相关（放在myForm之后）
      if (_this.sortCol != null) {
        myForm.append('sortBy', _this.sortCol)
      }
      if (_this.orderCol == 'ascending') {
        myForm.append('asc', 1)
      }
      //#endregion

      service({
        url: this.methodParam,
        method: "post",
        data: myForm
      }).then(response => {
        this.loading = false
        if (response.data.code == 200) {
          this.tableAllData = response.data.data;
          this.pagination.total = response.data.data.length;
          if (this.tableData.length == 0 && this.pagination.currentPage != 1) {
            this.pagination.currentPage = 1;
          }
        }
      })
    },
    handleSortChange({ prop, order }) {
      this.sortCol = prop;
      this.orderCol = order;
      this.getTableData()
    },
    exportTable() {
      this.exportLoading = true;
      let _this = this;

      if (this.tableAllData.length <= 0) {
        _this.$notify({
          message: "当前数据为空",
          type: "error",
          position: "bottom-right",
          duration: 1000,
        });
        this.exportLoading = false;
        return;
      }
      let filename = "" + dayjs().format("YYYY-MM-DD HH:ss:mm");
      let multiHeader = []; //标题设置
      let tHeader = [], filterVal = [];

      _this.tableItems.forEach(v => {
        tHeader.push(v.name);
        filterVal.push(v.prop);
      })
      let jsonData = this.tableAllData;
      let merges = []; // 合并单元格
      export_json_to_excel({
        multiHeader,
        header: tHeader,
        merges,
        filterVal,
        jsonData,
        filename: filename,
        autoWidth: 30,
        bookType: "xlsx",
      });
      this.exportLoading = false;
    },
  },
  created() {
    let _this = this

  },
  mounted() {
    this.getTableData()
  }
};
</script>
<style scoped lang="less">
.mainTable {
  background-color: #f1f2f9;
}
</style>